<template>
  <div>
    <tableComponents
      :pagination="{currentPage,pageSize,total:list.all_num}"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:table>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="list.data"
          stripe
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="用户信息" min-width="60">
            <template slot-scope="scope">
              <div class="img_bor_tx">
                <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
              </div>
            </template>
          </el-table-column>

          <el-table-column label min-width="100">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>用户昵称：</span>
                  <span>{{scope.row.nickname || '----'}}</span>
                </div>
                <div>
                  <span>会员账号：</span>
                  <span>{{scope.row.username}}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="商品图片" width="200" align="center">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover">
                <img :src="scope.row.piclink" style="width:500px;" />
                <img
                  slot="reference"
                  :src="scope.row.piclink"
                  :alt="scope.row.piclink"
                  style="width:100px"
                />
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="商品信息" min-width="220">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>名称：</span>
                  <span>{{scope.row.title}}</span>
                </div>
                <div v-if="scope.row.price">
                  <span>价格：</span>
                  <span>{{scope.row.price}}</span>
                </div>
                <div>
                  <span>库存：</span>
                  <span>{{scope.row.number}}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button
                class="weight-button"
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="showEditDialog(scope.row.id,'加库存')"
              >加库存</el-button>
              <el-button
                class="weight-button"
                :loading="$store.state.isLoading"
                type="danger"
                size="mini"
                @click="showEditDialog(scope.row.id,'扣库存')"
              >扣库存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog :title="str" :visible.sync="show" class="tl size_13" width="800px" :close-on-click-modal="false">
      <el-form :model="form" ref="numberValidateForm" label-width="120px">
        <el-form-item
          label="数量"
          prop="number"
          :rules="[
                      { required: true, message: '数量不能为空'},
                      { type: 'number', message: '数量必须为数字值'}
                    ]"
        >
          <el-col :span="12">
            <el-input type="number" v-model.number="form.number" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="subNum('numberValidateForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { ycStockSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: ycStockSearchData,
      show: false,
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      rechargeId: "",
      searchAll: {},
      str: "",
      form: {
        number: ""
      }
    };
  },

  methods: {
    backOrder(id) {
      var that = this;
      this.$confirm("是否驳回退货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.$api.getHuoyi.backOrder({ id }).then(res => {
            if (res.data.code == 200) {
              that.$fnc.alertSuccess(res.data.result);
              that.getNewsAll(that.searchAll);
            } else {
              that.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        })
        .catch(() => {});
    },
    closeOrder(id) {
      var that = this;
      this.$confirm("是否确定退货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.$api.getHuoyi.closeOrder({ id }).then(res => {
            if (res.data.code == 200) {
              that.$fnc.alertSuccess(res.data.result);
              that.getNewsAll(that.searchAll);
            } else {
              that.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        })
        .catch(() => {});
    },
    subNum(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.show = false;
          if (this.str == "加库存") {
            this.$api.getYc.addStcok(this.form).then(res => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess("操作成功");
                this.getNewsAll(this.searchAll);
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result);
              }
              this.$refs[formName].resetFields();
            });
          } else {
            this.$api.getYc.delStcok(this.form).then(res => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess("操作成功");
                this.getNewsAll(this.searchAll);
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result);
              }
              this.$refs[formName].resetFields();
            });
          }
        } else {
          return false;
        }
      });
    },
    showEditDialog(id, str) {
      this.str = str;
      this.show = true;
      this.form.id = id;
    },
    reload(id) {
      this.getNewsAll(this.searchAll);
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.$router.push(this.$route.path + "?page=" + 1);
      this.getNewsAll(obj);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;

      this.$api.getYc.getStockList(params).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.$router.push(this.$route.path + "?page=" + val);
    }
  },
  beforeCreate() {},
  created() {
    this.getNewsAll();
  },
  computed: {},
  watch: {
    getAdminuserList(obj) {
      this.list = obj.data;
      this.pageSize = parseInt(obj.page_size);
      this.currentPage = parseInt(obj.page);
      this.allPage = obj.all_page;
      this.allNum = obj.all_num;
    },
    $route() {
      var params = this.searchAll;
      params.page = this.$route.query.page || 1;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
      this.currentPage = Number(this.$route.query.page) || 1;
    }
  }
};
</script>

<style lang="less" scoped>
thead > tr > th {
  height: 45px;
  line-height: 45px;
}
td,
th {
  border: 1px solid #e1e3e4;
  font-size: 12px;
}
th {
  background: #f8f8f8;
  font-weight: normal;
  color: #323437;
}
td {
  height: 75px;
  color: #000;
}
.caozuo {
  padding-left: 50px;
}
.pl {
  padding-left: 15px;
}
.chkBox {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  background: #fff;
}
.aBtn_1 {
  padding: 10px;
}
.weight-button {
  margin-left: 0;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
